<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://unpkg.com/react@16/umd/react.development.js"></script>
    <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
    <!-- 生产环境中不建议使用 -->
    <script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
    <title>Document</title>
</head>
<body>
    <div id="app"></div>
    <script type="text/babel">
        // ES5写法
        // 利用props进行接值
        // 然后渲染
        function App (props){
            return <div>{props.name}-{props.age}</div>
        }
        ReactDOM.render(
            <App name="lili" age="18"/>,
            document.getElementById('app')
        )




        // ES6写法
        // 接值时与ES5的不同
        class App2 extends React.Component{

            // 接值
            constructor(props){         //构造器
                super(props)            //继承父组件的属性（若不写super下面的this会报错，无指向）
            }

            render(){                   //渲染
                return(
                    <div>{this.props.name}-{this.props.age}</div>
                )
            }
        }

        ReactDOM.render(
            <App2 name="xiaoming" age="20"/>,
            document.getElementById('app')
        )





    </script>
</body>
</html>